<template>
	<view class="wrapper">
    <view class="pay-btn" @click="goPay">确定下单</view>
    <view class="info">
      <view class="item">
        <view class="title">寄件人:</view>
        <view class="desc">
          <view class="name">{{ send.nickname }}</view>
          <view class="mobile">{{ send.mobile }}</view>
          <view class="city" v-if="send.city">
            {{ send.city.province }}
            {{ send.city.city }}
            {{ send.city.area }}
            {{ send.address }}
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="title">收件人:</view>
        <view class="desc">
          <view class="name">{{ receive.nickname }}</view>
          <view class="mobile">{{ receive.mobile }}</view>
          <view class="city" v-if="receive.city">
            {{ receive.city.province }}
            {{ receive.city.city }}
            {{ receive.city.area }}
            {{ receive.address }}
          </view>
        </view>
      </view>
    </view>
    <view class="info">
      <view class="title">商品</view>
      <view class="item">
        <view class="text"></view>
        <view class="">{{ product.name }}</view>,
        <view class="">{{ product.weight }}KG</view>
      </view>
    </view>
    <view class="info" v-if="time.day && time.time">
      <view class="title">预约时间:</view>
      <view class="item">
        <view class="text">{{ time.day }}</view>
        <view class="">{{ time.time }}</view>
      </view>
    </view>
    <view class="calc" v-if="params.channel">
      <view class="title">运费</view>
      <view class="item">
        <view class="text">总计:</view>
        <view class="num">￥{{ freight }}</view>
      </view>
    </view>
    <view class="account">
      <view class="title">帐户总额:</view>
      <view class="item">
        <view class="text">余额:</view>
        <view class="num">{{ account.balance * 1 }}</view>
      </view>
      <view class="item">
        <view class="text">优惠券:</view>
        <view class="num">{{ account.ticket * 1 }}</view>
      </view>
      <!--<view class="item">-->
      <!--  <view class="text">购物券:</view>-->
      <!--  <view class="num">{{ account.platform_ticket * 1 }}</view>-->
      <!--</view>-->
    </view>
    <view class="amount">
      <view class="title">需要支付:</view>
      <view class="pay">{{ amount * 1 }}</view>
    </view>
    <view class="remark">
      <view class="title">备注:</view>
      <view class="text">{{ remark }}</view>
      <!--<u&#45;&#45;textarea v-model="remark" placeholder="请填写备注" autoHeight></u&#45;&#45;textarea>-->
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
  // import { mapGetters } from 'vuex'
  import config from '../../config/config'
  import base64 from '../../util/base64'
  import Order from '../../api/order'
  import Express from '../../api/express'
  const orderModel = new Order()
  const expressModel = new Express()

	export default {
    computed: {
      // 加价的运费
      freight() {
        return (this.total_freight + this.total_freight * this.ratio / 100).toFixed(2)
      },
      // 需要支付的现金
      amount() {

        let total = this.freight

        // 优惠券有使用限制
        const ticket = this.account.ticket
        const use = this.ticket_use.use * this.ticket_use.amount
        console.log('b', this.account.balance)
        if (ticket >= use) {
          total = (total - use).toFixed(2)
        }

        // 余额
        total = (total - +this.account.balance).toFixed(2)
        if (total < 0) {
          total = 0
        }

        console.log('t', total)
        return total

      }
    },
    filters: {
    },
		data() {
			return {
        activeColor: color.main_color,
			  baseUrl: config.baseUrl,
        account: {},
        remark: '',
        params: {},
        // 加价比例
        ratio: 0,
        // 优惠券使用
        ticket_use: {},
        total_freight: 0,
        send: {},
        receive: {},
        time: {},
        product: {},
        type: 0
			}
		},
		onLoad(options) {
      // console.log(options)
      /*
        参数处理, 判断是购物车,还是立即购买
       */
      const params = options.params
      if (params) {
        this.params = base64.parseUrl(params)
        this.remark = this.params.remark
        this.total_freight = this.params.channel.totalFreight
        this.send = this.params.send
        this.receive = this.params.receive
        this.time = this.params.time
        this.product = this.params.product
        this.type = this.params.type
        console.log('params', this.params)
        // this.uniRequest()
        this.getAccount()
        this.getSet()
      } else {
        uni.showToast({
          title: '错误操作',
          icon: 'none',
          duration: 1000
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 300)
      }
		},
    onUnload() {
      // 处理后退
      // this.params = {}
      // this.$store.dispatch('Order/set_params', {})
    },
    onShow() {
      // 后退处理
      // if (this.params && this.params.ok) {
      //   if (this.params.product_id) {
      //     uni.reLaunch({
      //       url: `/sub_product/detail/index?id=${this.params.product_id}`
      //     })
      //   } else {
      //     uni.switchTab({
      //       url: '/pages/cart/index'
      //     })
      //   }
      // }
      // // 地址重新加载
      // this.getAddress()
      // this.hiddenAddress = true
    },
		methods: {
      getAccount() {
        orderModel.getAccount().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.account = data
        })
      },
      getSet() {
        expressModel.getUniSet().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.ratio = data.ratio
          // console.log(data)
        })
        expressModel.getTicket().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.ticket_use = data.set
          // console.log(data)
        })
      },
      // 下单
      goPay() {
        console.log('param', this.params)
        orderModel.createOrderExpress({
          ...this.params,
          remark: this.remark
        }).then(response => {

          let { data } = response
          data = base64.parse(data)
          console.log(data)

          if (+data.amount == 0) {
            // 余额支付成功
            uni.showToast({
              title: '下单成功',
            })

            setTimeout(() => {
              uni.navigateTo({
                url: '/sub_service/order/index?type=0'
              })
            }, 1000)

          } else {
            // 立即支付
            let serial = {
              order_id: data.order_id
            }
            serial = JSON.stringify(serial)
            uni.navigateTo({
              url: '/sub_main/pay/index?serial=' + serial
            })
          }



        })
      }
		}
	}
</script>

<style lang="scss" scoped>
$button-height: 100rpx;
$bottom-height: 130rpx;
.wrapper {
  background: $background_color;
  padding-bottom: $bottom-height;
  min-height: 100vh;
  padding-top: 10px;
  .info {
    padding: 20rpx;
    border-radius: 10rpx;
    background: white;
    font-size: 24rpx;
    margin: 0 20rpx;
    .line {
      background: #f3f5f7;
      width: 100%;
      height: 1px;
      margin: 20rpx 0;
    }
    .desc {
      //background: red;
      margin-left: 20rpx;
      .name, .mobile {
        font-weight: 700;
        height: 20px;
      }
    }
  }
  .pay-btn {
    position: fixed;
    z-index: 100;
    width: 100%;
    bottom: 0;
    height: $button-height;
    line-height: $button-height;
    background: $main_color;
    text-align: center;
    color: white;
  }
  .products {
    padding: 20rpx 0;
    .item {
      margin: 0rpx 20rpx 20rpx 20rpx;
      padding: 20rpx;
      background: white;
      display: flex;
      border-radius: 10rpx;
      align-items: center;
      .image {
        width: 160rpx;
        image {
          width: 100rpx;
          height: 100rpx;
          display: block;
          margin: auto;
        }
      }
      .desc {
        flex: 1;
        font-size: 24rpx;
        view {
          line-height: 18px;
        }
        .title {
          font-weight: 700;
          overflow: hidden;
        }
        .total {
          color: red;
        }
      }
    }
  }
  .address, .calc, .account, .amount, .remark, .info {
    margin: 20rpx;
    background: white;
    padding: 20rpx;
    font-size: 24rpx;
    border-radius: 10rpx;
    &.info {
      margin-top: 0;
    }
    .title {
      font-weight: 700;
    }
    .item {
      display: flex;
      align-items: center;
      .text {
        width: 150rpx;
        text-align: right;
      }
      .num {
        color: red;
        font-weight: 700;
        padding-left: 20rpx;
      }
    }
  }
  .address {
    margin-top: -20rpx;
    //display: flex;
    .list {
      //background: red;
      .item {
        display: flex;
        margin-bottom: 10px;
        //line-height: 20px;
        //font-size: 24rpx;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        .selected {
          width: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .desc {
          flex: 1;
          text-align: left;
          padding-left: 10px;
          ::v-deep {
            .line {
              line-height: 20px;
              display: flex;
              .left {
                width: 70px;
                font-weight: 700;
              }
              .right {
                flex: 1;
                &.color {
                  color: red;
                }
                &.info {
                  word-break: break-word;
                }
              }
            }
          }
        }
      }
    }
    .ops {
      display: flex;
      justify-content: space-around;
      height: 30px;
    }
    .more {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .account {
  }
  .amount {
    .pay {
      text-indent: 100rpx;
      color: red;
      font-size: 34rpx;
      font-weight: 700;
    }
  }
  .remark {
    .title {
      margin-bottom: 10px;
    }
  }
}
</style>
